<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="仓鼠的个人官网 - 一枚程序猿的网站，记录软件学习历程和作品，包括部落仓鼠工具、仓鼠的博客等项目">
    <meta name="keywords" content="仓鼠,程序猿,个人网站,部落冲突机器人,部落冲突阵型库,技术博客">
    <title>仓鼠の官网 | 程序猿的个人网站</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="v5/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 加载动画 -->
    <div class="loader">
        <div class="hamster">
            <div class="hamster-body">
                <div class="hamster-head">
                    <div class="hamster-ear"></div>
                    <div class="hamster-eye"></div>
                    <div class="hamster-nose"></div>
                </div>
                <div class="hamster-limb hamster-limb-fr"></div>
                <div class="hamster-limb hamster-limb-fl"></div>
                <div class="hamster-limb hamster-limb-br"></div>
                <div class="hamster-limb hamster-limb-bl"></div>
                <div class="hamster-tail"></div>
            </div>
        </div>
    </div>

    <!-- 背景网格 -->
    <div class="grid-bg"></div>
    
    <!-- 主容器 -->
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="logo">
                <span class="logo-text">仓鼠の官网</span>
                <div class="logo-animation"></div>
            </div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="https://yzycoc.com/blog">博客</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>

        <!-- 英雄区域 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1 class="hero-title">
                    <span class="title-part">Hello, I'm</span>
                    <span class="title-highlight">仓鼠</span>
                </h1>
                <p class="hero-subtitle">一枚热爱编程与技术的程序猿</p>
                <div class="hero-buttons">
                    <a href="#projects" class="btn btn-primary">查看项目</a>
                    <a href="https://yzycoc.com/blog" class="btn btn-secondary">阅读博客</a>
                </div>
            </div>
            <div class="hero-image">
                <div class="image-placeholder" data-src="https://example.com/hamster-avatar.png"></div>
                <div class="floating-elements">
                    <div class="floating-element element1"><i class="fas fa-code"></i></div>
                    <div class="floating-element element2"><i class="fas fa-robot"></i></div>
                    <div class="floating-element element3"><i class="fas fa-server"></i></div>
                </div>
            </div>
        </section>

        <!-- 项目展示 -->
        <section id="projects" class="projects">
            <h2 class="section-title">我的项目</h2>
            <div class="projects-grid">
                <!-- 项目1 -->
                <div class="project-card featured">
                    <div class="project-image">
                        <div class="image-placeholder" data-src="https://example.com/qq-robot.jpg"></div>
                    </div>
                    <div class="project-content">
                        <h3 class="project-title">部落仓鼠工具</h3>
                        <p class="project-description">QQ微信群部落冲突机器人，提供部落冲突阵型库等功能</p>
                        <div class="project-tech">
                            <span>Python</span>
                            <span>Flask</span>
                            <span>MongoDB</span>
                        </div>
                        <a href="https://yzycoc.com/qq" target="_blank" class="btn btn-primary">访问项目</a>
                    </div>
                </div>
                
                <!-- 项目2 -->
                <div class="project-card">
                    <div class="project-image">
                        <div class="image-placeholder" data-src="https://example.com/blog.jpg"></div>
                    </div>
                    <div class="project-content">
                        <h3 class="project-title">仓鼠的博客</h3>
                        <p class="project-description">分享技术文章、学习笔记和开发经验</p>
                        <div class="project-tech">
                            <span>Hexo</span>
                            <span>Markdown</span>
                            <span>Node.js</span>
                        </div>
                        <a href="https://yzycoc.com/blog" target="_blank" class="btn btn-secondary">访问博客</a>
                    </div>
                </div>
                
                <!-- 项目3 -->
                <div class="project-card">
                    <div class="project-image">
                        <div class="image-placeholder" data-src="https://example.com/api.jpg"></div>
                    </div>
                    <div class="project-content">
                        <h3 class="project-title">仓鼠API服务</h3>
                        <p class="project-description">提供各种实用的API接口服务</p>
                        <div class="project-tech">
                            <span>RESTful</span>
                            <span>Node.js</span>
                            <span>Express</span>
                        </div>
                        <a href="https://yzycoc.com/i" class="btn btn-disabled">即将开放</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于我 -->
        <section id="about" class="about">
            <div class="about-content">
                <h2 class="section-title">关于我</h2>
                <p class="about-text">
                    一枚热爱编程与技术的程序猿，专注于Web开发和自动化工具开发。
                    这个网站记录了我的软件学习生涯和学习历程，分享我的项目和作品。
                </p>
                <div class="skills">
                    <h3 class="skills-title">技术栈</h3>
                    <div class="skills-grid">
                        <div class="skill-item">
                            <div class="skill-icon"><i class="fab fa-python"></i></div>
                            <div class="skill-name">Python</div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-icon"><i class="fab fa-js"></i></div>
                            <div class="skill-name">JavaScript</div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-icon"><i class="fab fa-html5"></i></div>
                            <div class="skill-name">HTML5</div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-icon"><i class="fab fa-css3-alt"></i></div>
                            <div class="skill-name">CSS3</div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-icon"><i class="fab fa-node-js"></i></div>
                            <div class="skill-name">Node.js</div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-icon"><i class="fas fa-database"></i></div>
                            <div class="skill-name">MongoDB</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-image">
                <div class="image-placeholder" data-src="https://example.com/about-me.jpg"></div>
            </div>
        </section>

        <!-- 联系我 -->
        <section id="contact" class="contact">
            <h2 class="section-title">联系我</h2>
            <p class="contact-text">如果您对我的项目感兴趣或有任何问题，欢迎通过以下方式联系我</p>
            <div class="contact-methods">
                <a href="mailto:your-email@example.com" class="contact-method">
                    <i class="fas fa-envelope"></i>
                    <span>Email</span>
                </a>
                <a href="https://github.com/yourusername" target="_blank" class="contact-method">
                    <i class="fab fa-github"></i>
                    <span>GitHub</span>
                </a>
                <a href="https://twitter.com/yourusername" target="_blank" class="contact-method">
                    <i class="fab fa-twitter"></i>
                    <span>Twitter</span>
                </a>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="footer">
            <div class="footer-content">
                <div class="footer-logo">
                    <span>仓鼠の官网</span>
                </div>
                <div class="footer-links">
                    <a href="#home">首页</a>
                    <a href="#projects">项目</a>
                    <a href="https://yzycoc.com/blog">博客</a>
                    <a href="#about">关于</a>
                    <a href="#contact">联系</a>
                </div>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 仓鼠の官网. 保留所有权利.</p>
            </div>
        </footer>
    </div>

    <script src="v5/app.js"></script>
</body>
</html>